<template>
  <div class="Home">
    <!-- <Login></Login> -->
    <el-dialog
      title="登录"
      :show-close="false"
      :close-on-click-modal="false"
      :visible.sync="dialogFormVisible"
    >
      <!-- <el-form>
        <el-form-item> -->
      <div class="username">学号</div>
      <el-input
        v-model="form.name"
        autocomplete="off"
        show-password
        @submit.native.prevent
      ></el-input>
      <!-- </el-form-item> -->
      <!-- </el-form> -->

      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="Login()"
        >确 定</el-button>
      </div>
    </el-dialog>
    <br />

    <template>
      <div v-if="flg">
        <UserDeteil></UserDeteil>
        <br />
        <WorkDeteil></WorkDeteil>
        <br />
        <UploadFile></UploadFile>
      </div>
    </template>
  </div>
</template>

<script type="text/ecmascript-6">
import UploadFile from "@/components/UploadFile";
import UserDeteil from "@/components/UserDeteil";
import WorkDeteil from "@/components/WorkDeteil";

export default {
  name: "Home",
  data () {
    return {
      flg: false,
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      }
    };
  },
  inject: ["reload"],
  created: function () {
    let token = localStorage.getItem("token");
    if (token == null || token == "") {
      this.dialogFormVisible = true;
    } else {
      this.flg = true;
    }
  },
  methods: {
    Login () {
      var username = this.form.name;
      var password = this.form.name;
      this.$http.userApi
        .login({ username: username, password: password })
        .then(data => {
          let obj = data;
          if (obj["code"] == 2000) {
            localStorage.setItem("token", obj["data"]["token"]);
            this.dialogFormVisible = false;
            this.flg = true;
          } else if (obj["code"] == 3000) {
            console.log("账号错误");
          }
        })
        .catch(err => {
          this.$message.Error("请求失败");
        });
    }
  },
  components: {
    UploadFile,
    UserDeteil,
    WorkDeteil
  }
};
</script>

<style>
.Home .el-dialog {
  width: 400px;
}
.Home {
  width: 400px;
  margin: 0 auto;
  margin-top: 20px;
}
.username {
  margin-bottom: 20px;
}
@media (max-width: 669px) {
  .Home .el-dialog {
    width: 80%;
  }
  @media (max-width: 400px) {
    .Home {
      width: 90%;
      margin: 0 auto;
      margin-top: 10%;
    }
  }
}
</style>
